<template>
	<view class="wrapper">
		<view class="top-fixed">
			<u-search :show-action="false" v-model="params.name" placeholder="请输入用户姓名、手机号" @change="search"></u-search>
			<view class="scan">
				<u-icon @click="scan" name="scan" size="50"></u-icon>
			</view>
			<u-subsection :list="typeList" :current="0" mode="button" active-color="#ffffff" @change="sectionChange"></u-subsection>
		</view>
		<view class="occupy">

		</view>

		<view class="empty" v-if="list.length===0">
			<u-empty text="暂无数据"></u-empty>
		</view>

		<view class="items bg-white animate__animated animate__flipInX" v-for="(item,index) in list" :key="index">
			<view class="u-p-l-24 u-p-r-24 u-p-t-34 u-p-b-34 u-font-md  u-flex u-row-between u-border-bottom">
				<view class="u-font-md u-line-1">用户编号{{item.userCode}}</view>
				<view class="u-font-xs u-line-1 u-flex">
					<u-icon name="clock"></u-icon>
					<text class="u-m-l-2">{{item.content}}</text>
				</view>
			</view>

			<view class="main">
				<view class="u-flex u-m-b-30 color3">
					<view class="u-flex-1 u-p-r-48 name color3">{{item.name}}</view>
					<view class="tips">待付款</view>
				</view>
				<view class="desc color7">手机号:{{item.userPhone}}</view>
				<view class="u-flex u-row-right">
					<view class="color3">共{{item.number}}笔订单,待结￥{{item.amount}}</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view @click="clickWait(item,index)" class="btn bg1">核销</view>
					<view @click="callBack(item.userPhone)" class="btn bg2"><u-icon name="phone"
							class="u-m-r-4"></u-icon>联系</view>
				</view>
			</view>

		</view>

		<u-popup zIndex="999" v-model="show" mode="top">
			<view class="u-p-24 search">
				<view :style="{height:height+'px'}"></view>
				<u-form labelWidth="auto" label-position="top" :model="params" ref="formEl">
					<u-form-item label="用户姓名" prop="name">
						<u-input border v-model="params.name"></u-input>
					</u-form-item>
					<u-form-item label="用户编号" prop="userCode">
						<u-input border v-model="params.userCode"></u-input>
					</u-form-item>
					<u-form-item>
						<view>
							<u-button type="warning" @click="search">搜索</u-button>
							<view class="u-m-t-16">
								<u-button @click="reset">重置</u-button>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>

		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import { reactive, ref } from "vue";
	import userApi from '@/api/user'
	import {debounce} from "@/utils"
	const show = ref(false)
	const height = ref()
	const formEl = ref(null)
	const list = ref([])
	const typeList = reactive([{
		name: '线下月结',
	},
	{
		name: '线下余额'
	},])
	const params = reactive({
		// userCode: '',
		payType:6,
		name: '',
		ordersUserId: ''
	})
	const formRules = reactive({
		userCode: '',
		name: ''
	})
	function callBack(item) {
		uni.makePhoneCall({
			phoneNumber: item,
		})
	}

	function clickWait(item, index) {
		uni.showModal({
			title: '提示',
			content: '是否确认核销',
			success: (result) => {
				if (result.confirm) {
					userApi.clearingOrder({ userId: item.id,payType:params.payType }).then(res => {
						uni.showToast({
							title: '核验成功',
							success: () => {
								list.value.splice(index, 1)
							}
						})
					})
				}
			}
		})
	}

	function reset() {
		formEl.value.resetFields()
	}
	const search = debounce(function () {
		console.log("搜索月结核销")
		getList()
	},400)

	function scan() {
		uni.scanCode({
			success: (res) => {
				params.userCode = res.result
				getList()
			}
		})
	}

	onLoad(() => {
		uni.getSystemInfo({
			success: (e : any) => {
				// this.compareVersion(e.SDKVersion, '2.5.0')
				let statusBar = 0  //状态栏高度
				let customBar = 0  //
				let navbar = 0 // 自定义标题与胶囊对齐高度


				// #ifdef MP
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight + 45
				if (e.platform === 'android') {
					this.$store.commit('SET_SYSTEM_IOSANDROID', false)
					customBar = e.statusBarHeight + 50
				}
				// #endif


				// #ifdef MP-WEIXIN
				statusBar = e.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar = custom.bottom + custom.top - e.statusBarHeight

				navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
				// #endif


				// #ifdef MP-ALIPAY
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight + e.titleBarHeight
				// #endif


				// #ifdef APP-PLUS
				console.log('app-plus', e)
				statusBar = e.statusBarHeight
				customBar = e.statusBarHeight + 45
				// #endif


				// #ifdef H5
				statusBar = 0
				customBar = e.statusBarHeight + 45
				// #endif

				height.value = customBar
				console.log(height.value)

			}
		})
	})

	function getList() {
		userApi.getListWaitClearing(params).then(res => {
			console.log(res);
			list.value = res.data
		})
	}
	function sectionChange(index) {
		params.payType = index==1?7:6
		getList()
	}
	onReady(() => {
		formEl.value.setRules(formRules)
		getList()
	})
</script>

<style lang="scss" scoped>
	.wrapper {
		padding-bottom: 50rpx;

		.top-fixed {
			padding: 20rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: white;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			position: fixed;
			align-items: center;
			flex-wrap: wrap;
			::v-deep {
				u-search {
					flex: 1;

					.u-search {
						width: 94%;
					}
				}

				u-subsection {
					width: 100%;
					margin-top: 20rpx;
					.u-item-bg{
						background-color: #FF9900 !important;
					}
				}
			}
		}

		.occupy {
			height: 200rpx;
		}

		.search {}
		.empty{
			padding-top: 300rpx;
		}
		.items {
			border-radius: 24upx;
			margin: 20upx;

			.color3 {
				color: #333333;
			}

			.color7 {
				color: #777777;
			}

			.main {
				padding: 24upx 24upx 34upx;

				.name {
					font-size: 36upx;

				}

				.tips {
					min-width: 120upx;
					line-height: 48upx;
					padding: 0 30upx;
					text-align: center;
					border-radius: 24upx 0 0 24upx;
					color: white;
					background-color: #ffc300;
					font-size: 24upx;
					margin-right: -20upx;
				}

				.desc {
					padding-bottom: 24upx;
					font-size: 26upx;
				}

				.btn {
					min-width: 120upx;
					line-height: 60upx;
					font-size: 26upx;
					margin-right: 22upx;
					text-align: center;
					padding: 0 22upx;
					border-radius: 8upx;
				}

				.btn.bg1 {
					color: white;
					background-color: #fac127;
				}

				.btn.bg2 {
					border: 1upx solid #cccccc;
					color: #333333;
				}
			}
		}
	}
</style>
